<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript 30 days</title>
    <style>
    html {
        /* css 继承 它下面的所有子元素字体大小都是10px */
        font-size: 10px;
        background: url(http://i.imgurl.com/b9r5sEL.jpg) bpttom center;
        background-size: cover;
    }
    body, html {
        /* css reset 样式重置 */
      margin: 0;
      padding: 0;
      min-height: 100vh; /* 100%  80vh */
      font-family: sans-serif;
    }
    .keys {
        display: flex;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
    }
    .key{
        border: 4px solid #000;
        border-radius: 5px;
        margin: 10px;   /* m10 */
        font-size: 15px;
        padding: 10px 5px;
        width: 100px;
        text-align: center;
        color:white;
        background: rgba(0,0,0,.4);
        text-shadow: 0 0 5px black;
    }
    .key div {
        display: block;
        font-size: 40px;
    }
    .sound {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #ffc600;
    }
    </style>
</head>
<body>
  <div class="keys">
      <div class="key">
          <div>A</div>
          <span class="sound">clap</span>
      </div>
      <div class="key">
          <div>S</div>
          <span class="sound">hihat</span>
      </div>
      <div class="key">
          <div>D</div>
          <span class="sound">kick</span>
      </div>
      <div class="key">
          <div>F</div>
          <span class="sound">openhat</span>
      </div>
      <div class="key">
          <div>G</div>
          <span class="sound">boom</span>
      </div>
      <div class="key">
          <div>H</div>
          <span class="sound">ride</span>
      </div>
      <div class="key">
          <div>J</div>
          <span class="sound">snare</span>
      </div>
      <div class="key">
          <div>K</div>
          <span class="sound">tom</span>
      </div>
      <div class="key">
          <div>L</div>
          <span class="sound">tink</span>
      </div>
  </div>
  <audio src="./sounds/clap.wav" data-key="65"></audio>
  <audio src="./sounds/clap.wav" data-key="83"></audio>
  <script>
      window.addEventListener('keydown', function(event){
        //    console.log('keydown');
        let key = event.keyCode;
        console.log(key);
        const audio = document.querySelector(`audio[data-key="${key}"]`)

    if (audio) {
        audio.play()
    }
   
        //  如何按不同的键，发出不同的声音

      })


  </script>
</body>
</html>